<h2>My Heroes</h2>


<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
    <button type="button" class="delete" title="delete hero"
            (click)="delete(hero)">x</button>
  </li>
</ul>

<div>
  <label for="new-hero">Hero name: </label>
  <input id="new-hero" #heroName />

  <!-- (click) passes input value to add() and then clears the input -->
  <button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
    Add hero
  </button>
</div>

<!--<ul class="heroes">-->
<!--  <li *ngFor="let hero of heroes">-->
<!--    &lt;!&ndash;   执行this.selectedHero = hero&ndash;&gt;-->
<!--    &lt;!&ndash;    执行后，这里选中的hero对象就是selectedHero对象，下面的双向绑定流操作会对此处改动&ndash;&gt;-->
<!--    &lt;!&ndash;    如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它&ndash;&gt;-->
<!--    <button type="button" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">-->
<!--      &lt;!&ndash;      点击操作后就是selectedHero对象，不再是hero&ndash;&gt;-->
<!--      <span class="badge">{{hero.id}}</span>-->
<!--      <span class="name">{{hero.name}}</span>-->
<!--    </button>-->
<!--  </li>-->
<!--</ul>-->



<!--[hero]="selectedHero" 是 Angular 的属性绑定语法-->
<!--必须在app-hero-detail的ts文件里设置@Input()属性，如@Input() hero?: Hero-->
<!--这是一种单向数据绑定。从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，并映射到了 HeroDetailComponent 的 hero 属性。-->
<!--<app-hero-detail [hero]="selectedHero"></app-hero-detail>-->



                  <!--由上面的单项绑定代替！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
                  <!--这里的selectedHero对象 是上面  执行this.selectedHero = hero，将hero赋值给selectedHero-->
                  <!--<div *ngIf="selectedHero">-->
                  <!--  <h2>{{selectedHero.name}} Details</h2>-->
                  <!--  <div>id: {{selectedHero.id}}</div>-->
                  <!--  <div>-->
                  <!--    &lt;!&ndash;    [(ngModel)]双向绑定，只要这里进行修改，会影响按钮上的selectedHero对象&ndash;&gt;-->
                  <!--    &lt;!&ndash;    我把 for="hero-name"删除了也没影响，不知道为什么？？ 应该是涉及到数据流向子组件或者父组件有关&ndash;&gt;-->
                  <!--    <label for="hero-name">Hero name: </label>-->
                  <!--    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">-->
                  <!--  </div>-->
                  <!--</div>-->


